<template>
	<!-- <view class="linkage" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
		<view class="title">
			<view class="tt">
				{{province}}
			</view>
			<view class="tt">
				{{city}}
			</view>
			<view class="tt" >
				{{area}}
			</view>
		</view>
		<view class="link flex justify-between">
			<ul class="content" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
				<scroll-view scroll-y style="height: 100%;">
					<li class="hui" :class="index == isprovince?'active':''" @click="selectProvince(item, index)"
						v-for="(item,index) in provincelist" :key="index">
						{{item.label?item.label:obj.start_prov}}
					</li>
				</scroll-view>
			</ul>

			<ul class="content" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
				<scroll-view scroll-y style="height: 100%;">
					<li :class="index == iscity?'active':''" @click="selectCity(item, index)"
						v-for="(item,index) in citylist" :key="index">
						{{item.label?item.label:obj.start_city}}
					</li>
				</scroll-view>
			</ul>

			<ul class="content" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
				<scroll-view scroll-y style="height: 100%;">
					<li :class="index == isarea?'active':''" @click="selectaArea(item, index)"
						v-for="(item,index) in arealist" :key="index">
						{{item.label?item.label:''}}
					</li>
				</scroll-view>
			</ul>
		</view>
	</view> -->
	<view class="linkage" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
		<view class="title">
			<view class="tt">
				{{province}}
			</view>
			<view class="tt">
				{{city}}
			</view>
			<view class="tt" >
				{{area}}
			</view>
		</view>
		<view class="link flex justify-between">
			<ul class="content" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
				<scroll-view scroll-y style="height: 100%;">
					<li class="hui" :class="index == isprovince?'active':''" @click="selectProvince(item, index)"
						v-for="(item,index) in provincelist" :key="index">
						{{item.label?item.label:obj.start_prov}}
					</li>
				</scroll-view>
			</ul>
	
			<ul class="content" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
				<scroll-view scroll-y style="height: 100%;">
					<li :class="index == iscity?'active':''" @click="selectCity(item, index)"
						v-for="(item,index) in citylist" :key="index">
						{{item.label?item.label:obj.start_city}}
					</li>
				</scroll-view>
			</ul>
	
			<ul class="content" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
				<scroll-view scroll-y style="height: 100%;">
					<li :class="index == isarea?'active':''" @click="selectaArea(item, index)"
						v-for="(item,index) in arealist" :key="index">
						{{item.label?item.label:''}}
					</li>
				</scroll-view>
			</ul>
		</view>
	</view>
</template>

<script>
	// import { address } from '@/data/data.js'
	import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
	export default {
		name: "linkage",
		props:{
			obj: Object,
			searchHeight: Number,
			tabbarHeight: Number,
		},
		data() {
			return {
				isprovince: null,
				iscity: null,
				isarea: null,
				province: '',
				city: '',
				area: '',
				provincelist: [],
				citylist: [],
				arealist: [],
				chooseprovince: '',
				choosecity: '',
				choosearea: '',
			};
		},
		created() {
			this.provincelist = regionDataPlus
		},
		onLoad() {
			// if(this.obj){
			// 	this.provincelist.forEach((item, i)=>{
			// 		this.selectProvince(item, i)
			// 	})
			// 	this.citylist.forEach((item, i)=>{
			// 		this.selectCity(item, i)
			// 	})
			// 	this.arealist.forEach((item, i)=>{
			// 		this.selectaArea(item, i)
			// 	})
			// }
		},
		methods: {
			selectProvince(item, i) {
				this.arealist = []
				this.isprovince = i
				if (item.children) {
					this.citylist = item.children
				}
				this.setchose(1)
				
				if(item.label == '全部'){
					this.$emit('changeshow',false)
					this.chooseprovince = ''
					this.getchoose()
				}else{
					this.chooseprovince = item.label
					this.getchoose()
				}
			},
			selectCity(item, i) {
				this.iscity = i
				if (item.children) {
					this.arealist = item.children
				}
				this.setchose(2)
				// if (item.label != '市辖区' && item.label != '特别行政区') {
				// 	this.choosecity = item.label
				// }
				if(item.label == '全部'){
					this.$emit('changeshow',false)
					this.choosecity = ''
					this.getchoose()
				}else{
					this.choosecity = item.label
					this.getchoose()
				}
				
			},
			selectaArea(item, i) {
				this.isarea = i
				if(item.label == '全部'){
					this.$emit('changeshow',false)
					this.choosearea = ''
					this.getchoose()
				}else{
					this.choosearea = item.label
					this.getchoose()
					this.$emit('changeshow',false)
				}
				
			},
		
			getchoose() {
				const {
					chooseprovince,
					choosecity,
					choosearea
				} = this
				this.$emit('conceal', {
					chooseprovince,
					choosecity,
					choosearea
				})
			},
			setchose(id){
				if(id == 1){
					this.choosecity = ''
					this.choosearea = ''
					this.iscity = null
					this.isarea = null
				}else if(id == 2){
					this.choosearea = ''
					this.isarea = null
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	ul,
	li {
		list-style: none;
	}

	.linkage {
		.link {
			.content {
				//margin-top: 30upx;
				width: 33.33%;
				height: 100%;
				overflow-y: auto;
				text-align: center;

				li {
					// border-bottom: 1px solid #f1f1f1;
					padding: 30upx 0;
				}

				li:last-child {
					border-bototm: none !important;
				}

				.active {
					color: #FF5529 !important;
					background: #FFFFFF !important;
				}
				.hui{
					background: #f5f5f5;
				}
			}
		}
	}
</style>
